<template>
    <f7-page>
      <f7-navbar title="指派车辆详情" back-link="返回">
            <f7-nav-right>取消</f7-nav-right>
        </f7-navbar>

        <f7-card class="card_nav">
            <f7-card-header>
                <div class="text-left">
                    <h4>{{passInfo.company_name}}</h4>
                    <h5 class="ng-binding">{{passInfo.company_province}}-{{passInfo.company_city}}</h5>
                </div>
                <div class="text-right">
                    <img src='../../assets/img/infor-face.png' class="infor-face">
                    <span>{{passInfo.user_name}}</span>
                </div>
            </f7-card-header>
            <f7-card-header>
                <div class="card-left">
                    <img src='../../assets/img/pass-icon.png' class="line-icon">
                    <div class="pull-left">
                        <b>{{passInfo.send_city}}</b>
                        <span>{{passInfo.send_district}}</span>
                        <span>{{passInfo.time_arrival|dataFmt_fmt1('MM-dd E')}}</span>
                    </div>
                </div>
                <div class="card-center">
                    <i v-for="item in passInfo.product_categories"><span v-for="item1 in item.product_name">{{item1.amount}}</span>吨 {{passInfo.category_chn}}</i>
                    <h5 class="status-bg text-orange ">￥{{passInfo.price}}元/吨</h5>
                </div>
                <div class="card-right">
                    <div class="pull-right">
                        <b>{{passInfo.receive_province}}</b>
                        <span>{{passInfo.receive_district}}</span>
                        <span>{{passInfo.time_arrival|dataFmt_fmt1('MM-dd E')}}</span>
                    </div>
                </div>
            </f7-card-header>
        </f7-card>


        <f7-block>
            <f7-col>
                <div>
                    <div  v-for="item in passInfo.product_categories" class="row-wrap">
                        <p class="classification">
                            <img src='../../assets/img/label-goodsicon.png' class="label-icon-trade"> {{item.layer_1_chn}}
                        </p>

                        <div class="item-add" v-for="item1 in item.product_name">
                            <h5 class="bold text-green">{{item1.name}}</h5>
                            <span v-for="item2 in item1.attribute">
                                {{item2.name}}：{{item2.value}}{{item2.unit}}
                            </span>

                            <div class="item-fot">
                                <span>重量<i>{{item1.amount}}吨</i></span>
                                <span class="float-right"> {{item1.number}}{{item.unit}}</span>
                            </div>
                        </div>
                        <div class="item-fot">
                            <span> 已运输{{item.pass_number}}{{item.unit}}</span>
                            <span v-if="item.unit != item.pass_unit">已运输{{item.pass_amount_remain}}</span>
                            <span> 剩余 {{item.pass_amount_allot}}{{item.pass_unit}}</span>
                        </div>
                    </div>
                </div>
            </f7-col>
        </f7-block>

          <div class="bg-white">
            <div class="list-inset">
                <h4 class="bold">
                    货物描述
                </h4>
                <h4 class="text-gray"> {{!passInfo.appendix?"无特殊说明":passInfo.appendix}}</h4>
            </div>
        </div>

    <div class="Li_item">
            <div>
                <ul>
                    <li>
                        <span>信息费</span>
                        <span class="float-right bold">{{!passInfo.tip_price?0:passInfo.tip_price}}元/车</span>
                    </li>
                </ul>
            </div>
    </div>
       <div class="gap-20 text-align-center">
                    <h4 class="bold">
                        接单详情
                    </h4>
                    <h5 class="text-gray gap-5">距结束
                        <!--<daoJs :endTime="data.time_validity"></daoJs>-->
                    </h5>
         </div>

      <div class="bg-white gap-20">
         <div class="single_details bold">
            指派司机
                <small class="float-right text-smal">待指派{{passList.amount_remain}}吨,已接单{{passList.ratio}}%</small>
        </div>
        <div class="list-company-checkbox" v-for="item,index in passList.lists" v-show="item.status == 'ineffective'">
            <f7-link @click="$f7router.navigate('/pass/dirverDetail/'+passInfo._id+'/'+item.user_id+'/'+passInfo.amount_remain)" class="car_link">
                <div>
                    <span  class="orderby-num text-red ">{{index+1}}</span>
                    <div class="item item-avatar item-car">
                        <img src="../../assets/img/bg-comhomepage.jpg" class="img-car">
                        <h3 class="text-purple">
                            {{item.truck_num}}
                            <img src="../../assets/img/pass-icon2.png" class="pass-icon" v-show="item.source!='platform_assign'">
                            <img src="../../assets/img/pass-icon5.png" class="pass-icon" v-show="item.source=='platform_assign'">
                            <span class="replace">{{item.newLogin?'已上线':'未上线'}}</span>
                        </h3>
                        <h5 class="text-gray1" v-if="item.truck_weight">
                            <span v-if="item.truck_type">{{item.truck_type|carType()}}，</span>
                            <span v-if="item.truck_weight">载重{{item.truck_weight}}吨</span>
                            <span v-if="item.truck_long">，长{{item.truck_long}}米</span>
                        </h5>
                        <h5 class="text-red" >{{item.status|receiptStatus()}}</h5>
                        <f7-icon f7="right" color="gray" class="color-gray"></f7-icon>
                    </div>
                </div>
            </f7-link>
        </div>
          <!--逾期未接单-->
          <div class="list-company-checkbox" v-for="item,index in passList.lists" v-show="item.status != 'ineffective'">
              <div>
                  <span  class="orderby-num text-red ">{{index+1}}</span>
                  <div class="item item-avatar item-car">
                      <img src="../../assets/img/bg-comhomepage.jpg" class="img-car">
                      <h3 class="text-purple">
                          {{item.truck_num}}
                          <img src="../../assets/img/pass-icon2.png" class="pass-icon" v-show="item.source!='platform_assign'">
                          <img src="../../assets/img/pass-icon5.png" class="pass-icon" v-show="item.source=='platform_assign'">
                          <span class="replace">{{item.newLogin?'已上线':'未上线'}}</span>
                      </h3>
                      <h5 class="text-gray1" v-if="item.truck_weight">
                          <span v-if="item.truck_type">{{item.truck_type|carType()}}，</span>
                          <span v-if="item.truck_weight">载重{{item.truck_weight}}吨</span>
                          <span v-if="item.truck_long">，长{{item.truck_long}}米</span>
                      </h5>
                      <h5 class="text-red" >{{item.status|receiptStatus()}}</h5>
                      <f7-icon f7="right" color="gray" class="color-gray"></f7-icon>
                  </div>
              </div>
          </div>
    </div>

    <f7-list>
            <div class="item-address">
                <img src="../../assets/img/landmark.png" class="landmark">
                <h2 class="text-black">提货地址</h2>
                <h5 class="text-gray1">
                    个人地址：{{passInfo.send_province}}{{passInfo.send_district}}{{passInfo.send_addr}}</h5>
                <h5 class="text-gray1">联系人：{{passInfo.send_name}} &nbsp;&nbsp;&nbsp;&nbsp;手机号：{{passInfo.send_phone}}
                </h5>
                <f7-icon f7="right" color="gray" class="color-gray"></f7-icon>
            </div>
            <div class="item-address">
                <img src="../../assets/img/landmark-1.png" class="landmark">
                <h2 class="text-black">收货地址</h2>
                <h5 class="text-gray1">
                  个人地址：{{passInfo.receive_province}}{{passInfo.receive_district}}{{passInfo.receive_addr}}</h5>
                <h5 class="text-gray1">联系人：{{passInfo.receive_name}} &nbsp;&nbsp;&nbsp;&nbsp;手机号：{{passInfo.receive_phone}}</h5>
                <f7-icon f7="right" color="gray" class="color-gray"></f7-icon>
            </div>
        </f7-list>



        <div class="Li_item">
            <div>
                <ul>
                    <li>
                        <span>运费付款方式</span>
                        <span class="z_item_rt">{{passInfo.payment_method|payMent()}}</span>
                    </li>
                    <li>
                        <span>运费付款类型</span>
                        <span class="z_item_rt">{{passInfo.payment_choice|payMent()}}</span>
                    </li>
                    <li>
                        <span>运费付款方</span>
                        <span class="z_item_rt">{{passInfo.payment_payer|payMent()}}</span>
                    </li>
                      <li>
                        <span>结算凭证</span>
                        <span class="z_item_rt" v-if="passInfo.freight_voucher">{{passInfo.freight_voucher.style=='get'?'收货方':'发货方'}}
                            <span v-if="item.checked==true" v-for="item in passInfo.freight_voucher[passInfo.freight_voucher.style]">({{item.text}})</span>
                        </span>
                    </li>
                      <li v-if="passInfo.att_traffic">
                        <span>合理路耗</span>
                        <span class="z_item_rt" v-if="passInfo.att_traffic.one">每损耗{{passInfo.att_traffic.one[2]}}%后，每增加{{passInfo.att_traffic.one[0]}}%扣款{{passInfo.att_traffic.one[1]}}元</span>
                    </li>

                </ul>
            </div>

            <div>
                <ul>
                    <li>
                        <span>提货起始时间</span>
                        <span class="z_item_rt" v-if="passInfo.time_cost">自确认计划{{passInfo.time_cost.start_type}}日后提货</span>
                    </li>
                </ul>
            </div>

            <div>
                <ul>
                    <li>
                        <span>司机交货截止时间</span>
                        <span class="z_item_rt">{{passInfo.time_arrival|dataFmt_fmt1('MM-dd E')}}</span>
                    </li>
                </ul>
            </div>
        </div>

           <!-- 底部按钮 -->
        <f7-toolbar>
            <div class="row butt" v-show="passInfo.status!='ineffective'">
                <div class="col col-33">
                    短信邀请车辆
                </div>
                <div class="col col-33">
                    邀请更多车辆抢单
                </div>
                <div class="col col-33" @click="$f7router.navigate('/pass/selectPassDr/'+passInfo._id)">
                    继续指派
                </div>
            </div>
            <div class="row butt" v-show="passInfo.status=='ineffective'" >
                    已结束
            </div>
        </f7-toolbar>


    </f7-page>
</template>

<script>
    import F7Page from "framework7-vue/src/components/page";
    import F7Link from "framework7-vue/src/components/link";
    export default {
        name: "passAppointDtl",
        components: {F7Link, F7Page},
        data(){
            return{
                passInfo:'',
                passList:''
            }
        },
        methods:{
            async getPassDlt () {
                let param = {demand_id: this.$f7Route.params.lineid}
                this.passInfo = (await this.LineService.getPassAtDlt(param)).data.data
                this.passList = (await this.LineService.passAppointList(param)).data.data.assign


            },
        },
        mounted(){
            this.getPassDlt()
        },
        watch:{
            $route(to,from){
                console.log(to.path);
            }
        },
    }
</script>

<style scoped>
.card_nav {
  padding: 10px 0px;
  border-radius: 0px !important;
  margin: 0px !important;
  box-shadow: none !important;
}
.ios .card-header {
  padding: 4px 15px;
  min-height: 55px;
  position: static;
}

.text-right {
  text-align: center;
}

.infor-face {
  max-width: 24px;
  max-height: 24px;
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.text-right span {
  margin: 0 0 3px 0;
  font-size: 10px;
  color: #999;
  display: inherit;
}

.text-left h4 {
  font-size: 14px;
  padding-right: 15px;
  margin-bottom: 0;
  font-weight: bold;
  color: #333;
}

.label-v {
  width: 24px;
  height: 14px;
  vertical-align: text-bottom;
  vertical-align: middle;
}

.text-left h5 {
  color: #999;
  font-size: 12px;
  padding-right: 15px;
  font-weight: initial;
  margin-top: 3px;
}

.line-icon {
  position: absolute;
  left: 16px;
  width: 16px;
  height: 45px;
}

.pull-left {
  text-align: left;
  margin-left: 24px;
}

.pull-left b {
  font-size: 14px;
  color: #000;
  display: block;
}

.pull-left span {
  font-size: 12px;
  color: #666;
  display: block;
  width: 60px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.card-center i {
  font-style: normal;
  color: #333;
  font-size: 12px;
  text-align: center;
  display: inherit;
}

.text-orange {
  color: #FF6C00;
  font-weight: normal !important;
  font-size: 13px;
  text-align: center;
}

.status-bg {
  background: url('../../assets/img/route-bg.png') no-repeat top center;
  background-size: 95px 4px;
  margin-top: 6px;
  padding-top: 10px;
  width: 97px;
}

.card-right {
  text-align: center;
}

.pull-right {
  text-align: right;
}

.pull-right b {
  font-size: 14px;
  color: #000;
  display: block;
}

.pull-right span {
  margin: 0 0 3px 0;
  font-size: 10px;
  color: #999;
  display: inherit;
  width: 60px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}





.ios .block {
  margin: 0;
  padding: 15px 0px 15px 15px;
  background: #fff;
}

.classification {
  height: 21px;
  color: #333;
  font-size: 14px;
  margin: 0px;
}

.label-icon-trade {
  width: 32px;
  height: 16px;
  margin-right: 18px;
  margin-top: 2px;
  float: left;
}
.row-wrap {
  padding: 10px 0px 15px 0px;
  border-bottom: 1px solid #f5f5f5;
}
.item-add {
  background: #f8fff0;
  padding: 4px 10px;
  margin: 10px 0px;
  border-left: 1px solid green;
}

.item-add span {
  width: 50%;
  color: rgb(51, 140, 37);
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
}
.item-fot{
    padding-right:10px;
}
.item-fot span i {
  color: #ff6c00;
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-style: normal;
  font-weight: initial;
}

.item-add h5 {
  margin: 5px 0px;
}

.item-fot span {
  font-size: 13px;
  color: #666;
}

.ios .block-title {
  margin: 10px 0px 0px 0px;
}

.ng-binding {
  margin-right: 10px;
}

.bg-white {
  background: #fff;
}

.list-inset {
  margin: 0 15px;
   padding: 0px 0px 10px 0px;
}

.list-inset .bold {
  margin-bottom: 10px;
  color: #000;
}

.text-gray {
  margin: 0;
  color: #999;
  font-size: 14px;
}
.text-smal{
  color: #999;
  font-weight: initial;
}
.bold {
  font-weight: bold;
  font-size: 14px;
}
.text-green {
    color: rgb(51, 140, 37);
}

.Li_item ul {
  padding-left: 0;
  font: inherit;
  font-size: 100%;
  font-family: '微软雅黑';
  color: #444;
}
.Li_item li {
  background: white;
  padding-left: 10px;
  padding-right: 10px;
  border-bottom: 1px solid #f5f5f5;
  line-height: 40px;
  font-weight: bold;
}
.Li_item .z_item_rt {
  float: right;
  color: #ff6c00;
  font-weight: normal;
}

.gap-20{
    margin-top: 20px;
}
.gap-5{
    margin-top: 5px;
}
.ios .list {
  margin: 0px;
  background: #fff;
}

.item-address {
  position: relative;
  border: none;
  padding: 10px 0 8px 50px;
  min-height: 0;
  border-bottom: 1px solid #f5f5f5;
}

.item-address h2 {
  color: #333;
  font-size: 14px;
  margin: 0;
}

.item-address h5 {
  color: #333;
  font-size: 12px;
  margin: 0;
}

.landmark {
  position: absolute;
  border-radius: 0;
  width: 21px;
  height: 30px;
  left: 15px;
  top: 12px;
}

.color-gray {
  position: absolute;
  top: 30px;
  color: #8e8e93;
  font-size: 20px;
  right: 10px;
}
/* 底部 */
.butt {
  width: 100%;
}
.butt .col-33 {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: #666;
  text-align: center;
}

.text-orange {
  color: #ff6c00 !important;
}
.butt .col:last-child {
  width: 98px !important;
  margin-right: 10px;
}
/* 指派司机 */
.single_details{
    font-size: 14px;
    padding: 13px 15px;
}
.list-company-checkbox{
    position: relative;
    padding-left: 15px;
    border-bottom: 1px solid #f5f5f5;
    padding-bottom: 1px;
}
.item-car{
    border: none;
    min-height: 64px;
    font-size: 14px;
    color: #444;
    position: relative;
    z-index: 2;
    margin: -1px;
    padding: 16px;
    padding-left: 80px;
}
.item-car.item-avatar .img-car{
    left: 30px;
    border-radius: 3px;
    width: 38px;
    height: 28px;
    top: 25px;
    position: absolute;
}
.item h3{
    margin: 0 0 4px 0;
    font-size: 14px;
}
.text-purple{
    color: #A2A2F0;
}
.pass-icon {
    width: 30px;
    height: 17px;
    vertical-align: text-bottom;
    margin: 0px 4px;
}
.replace{
    font-size: 10px;
    color: #8d8d8d;
    text-align: center;
    display: inline-block;
    border: 1px solid #d8d8d8;
    border-radius: 4px;
    padding: 0 4px;
}
.item h5, .item h6{
    margin: 0 0 3px 0;
    font-size: 10px;
}
.text-gray1 {
    color: #666;
}
.color-gray{
    position: absolute;
    top: 30px;
    color: #8e8e93;
    font-size: 20px;
    right: 10px;
}
.orderby-num{
    position: absolute;
    left: 0px;
    top: 25px;
    font-size: 18px !important;
    z-index: 99;
   font-weight: bold;
}
.car_link{
    display: inline-block;
    width: 100%;
}
</style>
